@extends('home.layouts')
@section('content')

<div class="container">
  <div class="product_title">
    <h3>{{$goods->name}}</h3>
    <ul class="breadcrumb product_page">
      <li>
        <a href="index.php-route=common-home.htm" tppabs="http://shop14.jccms.cn/index.php?route=common/home">
        <i class="fa fa-home"></i>                        </a>
      </li>
      <li>
        <a href="index.php-route=product-product&amp;product_id=36.htm" tppabs="http://shop14.jccms.cn/index.php?route=product/product&amp;product_id=36">
        {{$goods->name}}                       </a>
      </li>
    </ul>
  </div>
  <div class="row">
    <div id="content" class="col-sm-9">
      <div class="row">
        <div class="col-sm-6 product_left">
          <div class="thumbnails">
            <div>
              <a class="thumbnail " href="{{ Storage::url($goods->cover_img) }}" tppabs="{{ Storage::url($goods->cover_img) }}" data-image="{{Storage::url($goods->cover_img)}}">

                <img src="{{ Storage::url($goods->cover_img) }}" tppabs="{{Storage::url($goods->cover_img)}}" title="時尚簡約辦公小桌" alt="時尚簡約辦公小桌" id="atzoom" data-zoom-image="{{ Storage::url($goods->cover_img) }}" data-bd-imgshare-binded="1">
              </a>

            </div>

            <div class="image_additional_outer">
              <div id="additional-images" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
                <div class="owl-wrapper-outer">
                  <div class="owl-wrapper" style="width: 736px; left: 0px; display: block; transition: all 0ms ease 0s; transform: translate3d(0px, 0px, 0px);">
                    
                    @foreach($goods->pictures as $pic)
                    <div class="owl-item" style="width: 92px;">
                      <div class="image-additional item"><a class="thumbnail elevatezoom-gallery" href="{{Storage::url($pic->path)}}" tppabs="{{ Storage::url($pic->path) }}" title="時尚簡約辦公小桌" data-zoom-image="{{ Storage::url($pic->path) }}" data-image="{{ Storage::url($pic->path) }}"> <img src="{{ Storage::url($pic->path) }}" tppabs="{{ Storage::url($pic->path) }}" title="時尚簡約辦公小桌" alt="時尚簡約辦公小桌" data-bd-imgshare-binded="1"></a></div>
                    </div>
                    @endforeach
                    
                  </div>
                </div>
                <div class="owl-controls clickable" style="display: none;">
                  <div class="owl-buttons">
                    <div class="owl-prev"><i class="fa fa-angle-left"></i></div>
                    <div class="owl-next"><i class="fa fa-angle-right"></i></div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="col-sm-6 product_center">
          <!--  <h2>時尚簡約辦公小桌</h2>-->
          <ul class="list-unstyled price_section">
            <li>
              <h2 class="price_section_inner">{{$goods->price}}</h2>
            </li>
            <li>
              購買所需獎勵積分                                                                                                                                            100                                                                                                                                    
            </li>
          </ul>
          <div class="rating rating_border">
            <p>
              <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>
              <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>
              <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>
              <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>
              <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>
              <a class="review-count review_tag" href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;">
              {{$goods->comments()->count()}} 評論                                                                                                                                            </a> |
              <a class="write-review" href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;">
              寫評論                                                                                                                                            </a>
            </p>
          </div>
          <ul class="list-unstyled">
            <li>
              @if(!empty($goods->brand->name))
              品牌:<a href="{{route('goods.index', ['brand' => $goods->brand->id])}}">{{ $goods->brand->name }}</a>
              @endif
            </li>
            <li>
              型號:                                                                                                                                    Pro                                                                                                                         
            </li>
            <li>
              庫存狀態:                                                                                                                                            {{ $goods->stock }}                                                                                                                                 
            </li>
          </ul>
          <div id="product">
            <div class="form-group qty">
              <label class="control-label" for="input-quantity">
              數量                                                                                                                                                                                                                                </label>
              <input type="number" name="quantity" value="1" size="2" id="input-quantity" class="form-control">
              <input type="hidden" name="product_id" value="36">
              <br>
              @if($goods->attrs()->exists())
               @component('home.components.attr-select', ['attrs' => $goods->attrs]) @endcomponent
              @endif
              <div class="btn-group addcart_group">
                <button type="button" id="addToCart" data-loading-text="加載中......" class="btn btn-primary btn-lg button-cart" data-goods_id="{{$goods->id}}">
                加入購物車</button>



                <button type="button" data-toggle="tooltip" data-goods_id="{{ $goods->id }}" class="btn btn-default wishlist_button" title="" data-original-title="收藏"><i class="fa fa-heart"></i>
                </button>

                <button type="button" data-toggle="tooltip" class="btn btn-default compare" title="{{ $goods->name }}" data-goods_id="{{ $goods->id }}" data-original-title="對比">
                  <i class="fa fa-exchange"></i>
                </button>

              </div>


            </div>
          </div>
          <hr>
          <!-- AddBaidu Share Button BEGIN -->
          <div class="bdsharebuttonbox bdshare-button-style0-24" data-bd-bind="1582595024845"><a href="#" class="bds_more" data-cmd="more"></a><a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a><a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a><a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a><a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a><a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a><a title="分享到Facebook" href="#" class="bds_fbook" data-cmd="fbook"></a><a title="分享到Twitter" href="#" class="bds_twi" data-cmd="twi"></a><a title="分享到linkedin" href="#" class="bds_linkedin" data-cmd="linkedin"></a></div>
          <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin","fbook","twi","linkedin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin","fbook","twi","linkedin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
          <!-- AddBaidu Share Button END -->
        </div>
      </div>
    </div>
    <!--right column-->
    <div class="column_right_outer col-sm-3 hidden-xs">
      <aside id="column-right" class="col-sm-3 hidden-xs">
        <div>
          <div>
            <div class="pro_static_content_main">
              <div class="pro_cms_img"><img src="r.jpg" tppabs="http://shop14.jccms.cn/image/catalog/r.jpg" alt="brand" data-bd-imgshare-binded="1"></div>
              <div class="pro_static_content">This is a static CMS block edited from theme admin panel.You can insert ant content (text, images, HTML)) here. Lorem ipsum dolor sit amet, consectetur adipiscing elit porta.</div>
              <div class="pro_static_outer">
                <div class="pro_cms_icon"><i class="fa fa-truck f-24"></i></div>
                <div class="pro_static_content_inner"><span class="content_cms_heading">free ground shipping</span><br>
                  <span class="content_cms_desc">on all orders over $50</span>
                </div>
              </div>
              <div class="pro_static_outer">
                <div class="pro_cms_icon"><i class="fa fa-usd f-24"></i></div>
                <div class="pro_static_content_inner"><span class="content_cms_heading">30-day money-back</span><br>
                  <span class="content_cms_desc">guarantee for each product</span>
                </div>
              </div>
              <div class="pro_static_outer">
                <div class="pro_cms_icon"><i class="fa fa-gift f-24"></i></div>
                <div class="pro_static_content_inner"><span class="content_cms_heading">free bonus gifts</span><br>
                  <span class="content_cms_desc">with every order</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </aside>
      <div class="pro_tag">
      </div>
    </div>

    <div id="tabs_info" class="col-sm-12">
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="#tab-description" data-toggle="tab">
          詳情                                                        </a>
        </li>
        <li>
          <a href="#tab-review" data-toggle="tab">
          評論 ({{$goods->comments()->count()}})                                                                    </a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab-description">
          <div>
            {!! $goods->description !!}
          </div>
        </div>
        <div class="tab-pane" id="tab-review">
          @include('home.includes.comment_create', ['goods' => $goods])

          @include('home.includes.goods_comments', ['goods' => $goods])
        </div>

      </div>

    </div>


    <div class="related_product col-sm-12">
    </div>
  </div>
  <!--  -->
</div>

<script type="text/javascript">
  $(function() {
    // $("#addToCart").on('click', function() {
    //   const goods_id = "{{$goods->id}}"
    //   $.ajax({
    //     url:"{{ route('carts.store') }}",
    //     data:{
    //       goods_id:goods_id,
    //       quantity:1,
    //       attrs:'',
    //     },
    //     type:'post',
    //     success:res => {
    //       console.log(res);
    //     }
    //   })
    // })
  })
</script>
@endsection